<template>
     <div class="pieChart" >
         <div class='pieChart_title' style='text-align:center;font-size:24px'>数字群团开展情况</div>
         <div id='main' style='width:100%;height:100%' class='pieChart_item'>
         </div>
     </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data(){
        return{
            options:{}
        }
    },
    mounted(){
       
        var myChart = echarts.init(document.getElementById("main"));
        this.options = {
                xAxis: {
                type: 'category',
                data: ['风采共展', '浏览量', '活动类推', '参加人数']
            },
            legend: {
                data: ['风采共展', '浏览量', '活动类推', '参加人数']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [16, 13, 8, 150],
                type: 'bar',
                showBackground: true,
                itemStyle:{
                    normal:{
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 16
                            }
                        },
                        color: function(params){
                            var colorList=["#5b9bd5","#ed7d31","#a5a5a5","#ffc000"];
                            return colorList[params.dataIndex];
                        }
                    }
                },
                backgroundStyle: {

                    
                }
            }],
            
        };
    
    
        myChart.setOption(this.options);
       
    }
}
</script>
<style scoped>
.pieChart{
    width: 100%;
    height:100%;
    background:#fff;
    padding:10px;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px 3px rgba(195, 206, 220, 0.07);
    border-radius: 8px;
    display:flex;
    flex-direction: column;
}
.pieChart_title{
    
    font-weight: 800;
    color: #434E7E;
}
.pieChart_item{
    flex:1;
}
</style>